<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 新建 -->
        <div>
            <h1>新建</h1>
            <ul>
                <li><label for="id">编号:<input type="text" v-model="userinfo.id"></label></li>
                <li><label for="name">姓名:<input type="text" v-model="userinfo.name"></label></li>
                <li><label for="age">年龄:<input type="text" v-model="userinfo.age"></label></li>
                <li><label for="sex">性别:<input type="text" v-model="userinfo.sex"></label></li>
                <li><button type="button" @click="adduser()">创建</button></li>
            </ul>
        </div>
        <!-- 修改 -->
        <div>
            <h1>修改</h1>
            <ul>
                <li><label for="id">编号:<input type="text" v-model="editinfo.id"></label></li>
                <li><label for="name">姓名:<input type="text" v-model="editinfo.name"></label></li>
                <li><label for="age">年龄:<input type="text" v-model="editinfo.age"></label></li>
                <li><label for="sex">性别:<input type="text" v-model="editinfo.sex"></label></li>
                <li><button type="button" @click="moduser()">修改</button></li>
            </ul>
        </div>
        <section>
            <!-- 展示 -->
            <div v-if="userList.length > 0">
                <table border="1" cellspacing="0" cellpadding="0">
                    <tr>
                        <th>编号</th>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>性别</th>
                        <th>更多</th>
                    </tr>
                    <tr v-for="(item,index) of userList">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.age}}</td>
                        <td>{{item.sex}}</td>
                        <td>
                            <button type="button" @click="deluser(index)">删除</button>
                            <button type="button" @click="edituser(index)">修改</button>
                        </td>

                    </tr>
                    
                </table>
            </div>
            <div v-else>
                没有用户信息
            </div>
        </section>
    </div>

    <script src="js/vue.js"></script>

    <script>
        let myApp = new Vue({
            el:'#app',
            data:{
                userList:[],
                userinfo:{
                    id:'',
                    name:'',
                    age:'',
                    sex:''
                },
                editinfo:{
                    id:'',
                    name:'',
                    age:'',
                    sex:''
                },
                currenIndex:0

            },
            methods:{
                adduser(){
                    this.userList.push(this.userinfo)
                    this.userinfo = {
                        id:'',
                        name:'',
                        age:'',
                        sex:''
                    }
                },
                deluser(index){
                    this.userList.splice(index,1)
                },
                edituser(index){
                    this.editinfo = JSON.parse(JSON.stringify(this.userList[index]))

                    this.currenIndex = index
                },
                moduser(currenIndex){
                    Vue.set(this.userList,this.currenIndex,this.editinfo)
                }
            }
        })
    </script>
</body>
</html>